<template>
  <div class="app-container add">
    <h4>计量核查信息</h4>
    <table  class="table"  border="1" rules="all">
      <tr>
        <td><span class="red">*</span>设备标题</td>
        <td colspan="3" @click="selectEquipment"><span>{{selectData.deviceName}}</span></td>
      </tr>
      <tr>
        <td>类别</td>
        <td colspan="3"><span>{{selectData.deviceBrand}}</span></td>
      </tr>
      <tr>
        <td>品牌</td>
        <td><span>{{selectData.deviceModel}}</span></td>
        <td>型号</td>
        <td><span>{{selectData.deviceModel}}</span></td>
      </tr>
      <tr>
        <td>单位</td>
        <td></td>
        <td>供应商</td>
        <td></td>
      </tr>
      <tr>
        <td>位置</td>
        <td></td>
        <td><span class="red">*</span>负责人</td>
        <td>
          <el-select  placeholder="请选择" clearable v-model="addForm.admin">
            <el-option
              v-for="item in [{value: '1',label: '管理员'},{value: '2',label: '张三'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span class="red">*</span>计划类型</td>
        <td>
          <el-select  placeholder="请选择" clearable v-model="addForm.planType">
            <el-option
              v-for="item in [{value: '1',label: '计量'},{value: '2',label: '核查'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
        <td><span class="red">*</span>内外部计量</td>
        <td >
          <el-select  placeholder="请选择" clearable v-model="addForm.inoutMetering">
            <el-option
              v-for="item in [{value: '1',label: '内部'},{value: '2',label: '外部'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </td>
      </tr>
      <tr>
        <td>计量单位/部门</td>
        <td>
          <el-input placeholder="请填写"></el-input>
        </td>
        <td><span class="red">*</span>提前提醒时间</td>
        <td class="short">
          <el-input placeholder="请填写" v-model="addForm.noticeDate"></el-input>
          <el-select  placeholder="请选择" clearable  v-model="addForm.noticeUnit">
            <el-option
              v-for="item in [{value: '日'},{value: '月'},{value: '年'}]"
              :key="item.value" :label="item.value"  :value="item.value"/>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span class="red">*</span>检定周期</td>
        <td class="short">
          <el-input placeholder="请填写" v-model="addForm.meteringDate"></el-input>
          <el-select  placeholder="请选择" clearable v-model="addForm.meteringUnit">
            <el-option
              v-for="item in [{value: '日'},{value: '月'},{value: '年'}]"
              :key="item.value" :label="item.value"  :value="item.value"/>
          </el-select>
        </td>
        <td><span class="red">*</span>下次检定周期</td>
        <td>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="dateChange">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>计量范围</td>
        <td colspan="3">
          <el-input placeholder="请填写" type="textarea" v-model="addForm.meteringRange"></el-input>
        </td>
      </tr>
      <tr>
        <td>计量精度</td>
        <td>
          <el-input placeholder="请填写" type="textarea" v-model="addForm.meteringPrecision"></el-input>
        </td>
        <td>允许误差</td>
        <td>
          <el-input placeholder="请填写" type="textarea" v-model="addForm.allowError"></el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="3">
          <el-input placeholder="请填写" type="textarea" :rows="4" v-model="addForm.remark"></el-input>
        </td>
      </tr>
    </table>
    <div class="title">
      <h4>相关附件</h4>
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :file-list="fileList">
        <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
      </el-upload>
    </div>
    <div class="btn">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
    <addDialog v-if="selectDialog" @selectChange="currentChange"></addDialog>
  </div>
</template>

<script>
  import addDialog from '@/views/metrological/metrologicalPlan/addDialog'
    export default {
      name: "add.vue",
      components:{
        addDialog,
      },
      data(){
          return{
            fileList:[],
            addForm: {
              planCode: '',//计划编号
              deviceId: '',//设备编号
              deviceName: '',//设备名称
              meteringDept: '',//计划单位/部门
              planType: '',//计划类型
              inoutMetering: '',// 内外部1内2外
              nextMeteringDate: '',//下次定检日期
              noticeDate:'4',
              noticeUnit:'',
              meteringDate:'4',
              meteringUnit:'',
              meteringRange:'',//计量范围
              meteringPrecision:'',//计量精度
              allowError:'',//允许误差
              remark:''
            },//查询条件
            dateChange:'',
            selectDialog:false,
            selectData:'',
          }
      },
      created() {
          if(this.$route.query.data){
            this.addForm=Object.assign(this.$route.query.data,this.$options.data())
          }
      },
      methods:{
        submit(){
          this.$message.success('添加成功！')
          this.$router.push({path:'/metrological/metrologicalPlan'});
        },
        //选择设备
        selectEquipment(){
          this.selectDialog=true
        },
        //成功回调
        currentChange(data){
          if(data){
            this.selectData=data
          }
          this.selectDialog=false
        }
      }
    }
</script>

<style  lang="scss">
.add{
  h4{
    color: #05A380;
  }
  .title{
    margin:20px 0;
    overflow: hidden;
    width:900px;
    text-align: left;
  }
  .btn{
    width:900px;
    text-align: center;
  }
  .table{
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
      border: none;
    }
    tr{
      td:nth-child(2n-1){
        width: 150px;
        text-align: center;
      }
      td{
        width:300px;
        line-height: 35px;
        .red{
          padding:0 3px;
          color:red;
        }
        span{
          padding-left:20px
        }


      }
      .short{
        .el-input{
          width:60%;
        }
        .el-select{
          width:40%;
        }
      }
    }
  }

}
</style>
